<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="example">
        <h2>成绩表</h2>
        <label>姓名：</label><span>{{name}}</span>
        <label>性别：</label><span>{{sex}}</span>
        <label>年龄：</label><span>{{age}}</span>
        <div class="report">
            <div class="title">
                <div>学期</div>
                <div>数学</div>
                <div>物理</div>
                <div>化学</div>
                <div>英语</div>
                <div>计算机</div>
                <div>总分</div>
            </div>
            <div class="content" v-for="(grade,index) in grades">
                <div>{{grade.term}}</div>
                <div v-for="score in grade.scores">
                    <div>{{score}}</div>
                </div>
                <div>{{total(index)}}</div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var exam = new Vue({
        el: '#example',
        data: {
            name: '张无忌',
            sex: '男',
            age: 20,
            grades: [{
                term: '第一学期',
                scores: {
                    math: 90,
                    physics: 85,
                    chemistry: 95,
                    english: 86,
                    computer: 96
                }
            }, {
                term: '第二学期',
                scores: {
                    math: 92,
                    physics: 83,
                    chemistry: 90,
                    english: 88,
                    computer: 95
                }
            }]
        },
        methods: {
            total: function (index) {
                var total = 0;
                var obj = this.grades[index].scores;
                for (var i in obj) {
                    total += obj[i]
                }
                return total;
            }
        }
    })
</script>

<style>
    .title,
    .content {
        display: flex;
    }
</style>

</html>